<!--  -->
<template>
  <div class="fly-panel fly-panel-user" pad20>
    <div
      class="layui-tab layui-tab-brief"
      lay-filter="user"
      id="LAY_msg"
      style="margin-top: 15px"
    >
      <button
        class="layui-btn layui-btn-danger"
        id="LAY_delallmsg"
        @click="clearall"
      >
        清空全部消息
      </button>
      <!-- <div class="fly-none" v-if="lists.length != 0">您暂时没有最新消息</div> -->
      <div id="LAY_minemsg" style="margin-top: 10px">
        <ul class="mine-msg">
          <li
            data-id="123"
            v-for="(item, index) in lists"
            :key="'msgitem' + index"
          >
            <blockquote class="layui-elem-quote">
              <a href="/jump?username=Absolutely" target="_blank"
                ><cite>{{ item.cuid.name }}</cite></a
              >回答了您的求解<a
                target="_blank"
                href="/jie/8153.html/page/0/#item-1489505778669"
                ><cite>{{ item.title }}</cite></a
              >
            </blockquote>
            <div v-richtext="item.content"></div>
            <p>
              <span>{{ item.created | moment }}</span>
              <button
                class="layui-btn layui-btn-small layui-btn-danger fly-delete"
                @click="clear(item)"
              >
                删除
              </button>
            </p>
          </li>
        </ul>
        <pagination
          v-show="total > 0"
          :showType="'text'"
          :hasSelect="true"
          :total="total"
          :size="size"
          :current="current"
          :showEnd="true"
          :hasTotal="true"
        ></pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getMsg, setMsg } from '@/api/user'
import pagination from '@/components/modules/pagination/Index.vue'
export default {
  name: 'user-msg',
  data () {
    return {
      lists: '',
      page: '',
      limit: 10,
      total: 0,
      size: 10,
      current: 0,
    };
  },

  components: {
    pagination
  },

  computed: {},

  mounted () {
    // console.log(this.lists);
    this.getMsgAll()

  },

  methods: {
    clearall () {
      setMsg().then((res => {
        if (res.code === 200) {
          //清空
          // this.lists = ''
          this.lists = res.data
          this.total = res.total
        }
      }))
    },
    clear (item) {
      console.log(item);
      // console.log(item._id);
      setMsg({ id: item._id }).then((res => {
        if (res.code === 200) {
          //清空特定
          this.getMsgAll()
          this.$store.commit('setMessage', { message: this.$store.state.num - 1 })
        }
      }))
    },
    init () {
      this.ws = new WebSocket('ws://127.0.0.1:3001')
      this.ws.onopen = this.onOpen
      this.ws.onmessage = this.onMessage
      this.ws.onclose = this.onClose
      this.ws.onerror = this.onError
    },

    handelChange (val) {
      this.page = val
      this.getMsgAll()

    },
    getMsgAll () {
      getMsg({
        page: this.page,
        limit: this.limit
      }).then((res) => {
        if (res.code === 200) {
          // console.log(res.data);
          this.lists = res.data
          this.total = res.total
        }
      })
    }
  }
}

</script>
<style scoped lang='scss' >
</style>